<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>统计</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <script src="js/jquery.js"></script>
    <script src="js/laydate/laydate.js"></script>
    <script src="js/app.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<style>
    .top-panel {
        border: 1px solid #eceff9;
        border-radius: 5px;
        text-align: center;
    }
    .top-panel > .layui-card-body{
        height: 60px;
    }
    .top-panel-number{
        line-height:60px;
        font-size: 30px;
        border-right:1px solid #eceff9;
    }
    .top-panel-tips{
        line-height:30px;
        font-size: 12px
    }
    .panel-box {padding:5px 15px}
    .main_btn > p {height:40px;}
</style>
<body>
    <div class="panel-box">
            <legend>IP/请求项/失败请求统计</legend>
            <div style="margin: 10px 10px 10px 10px">
                <form class="form-inline" action="" id="query_form">
                    <input type="hidden" name="type" value="interface">

                    <div class="form-group">
                        <select name="address" id="address" class="form-control">
                            <option value="">所有服务器</option>
                            {list $ip_list}
                            <option value="{$val}">{$val}</option>
                            {/list}
                        </select>
                    </div>
                    <div class="form-group">
                        <select name="module" id="module" class="form-control">
                            <option value="">模块</option>
                            {list $module_list}
                            <option value="{$key}">{$val}</option>
                            {/list}
                        </select>
                    </div>
                    <div class="form-group">
                        <select name="ways" id="ways" class="form-control">
                            <option value="ip">IP</option>
                            <option value="path">请求项</option>
                            <option value="fail">失败请求</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <input type="text" autocomplete="off" class="form-control w150" name="start" id="start" value="{?$start}" placeholder="开始时间">
                    </div>
                    <div class="form-group">
                        <input type="text" autocomplete="off" class="form-control w150" name="end" id="end" value="{?$end}" placeholder="结束时间">
                    </div>
                    <div class="form-group">
                        <input type="text" class="form-control" style="width: 100px;" name="limit" value="{$limit}" placeholder="数量1~1000">
                    </div>
                    <div class="form-group">
                        <button type="submit" class="btn btn-default">查询</button>
                    </div>
                </form>
            </div>
    </div>

    <div class="panel-box">
        {if $fail_address}
        <blockquote class="layui-elem-quote" style="border-left-color: #FF5722;display: none;" id="fail_address">
            <strong>无法从以下数据源获取数据:</strong><?=implode(', ', $fail_address)?>
        </blockquote>
        {/if}
    </div>

    <div class="panel-box">
        <table class="table">
            <thead>
            <tr>
                <th>名称</th>
                <th>数量</th>
            </tr>
            </thead>
            <tbody id="query_ret">
            {if $data}
            {list $data $v}
            <tr>
                <td>{$k_v}</td>
                <td>{$v}</td>
            </tr>
            {/list}
            {else}
            <tr>
                <td colspan="100%">暂无数据</td>
            </tr>
            {/if}
            </tbody>
        </table>
    </div>

<script>
    //时间选择器
    laydate.render({
        elem: '#start',type: 'datetime'
    });
    laydate.render({
        elem: '#end',type: 'datetime'
    });

    autoSelect('address', '{$address}');
    autoSelect('module', '{$module}');
    autoSelect('ways', '{$ways}');

    var queryRet = $('#query_ret');
    var buttonSubmit = $('button[name="submit"]');
    $('#query_form').submit(function () {
        buttonSubmit.attr('disabled','disabled');
        $.getJSON('/index/ipf-count?json=1', $(this).serialize(), function(json){
            buttonSubmit.removeAttr('disabled');
            if(json.code!=0){
                alert(json.msg);
                return false;
            }
            if(json.data.fail_address.length>0){
                $('#fail_address').html('<strong>无法从以下数据源获取数据:</strong>'+ json.data.fail_address.join(','));
                $('#fail_address').show();
            }

            queryRet.html('');
            for(i in json.data['data']){
                var $v = json.data['data'][i];
                queryRet.append('<tr>\
                    <td>'+ i +'</td>\
                    <td>'+ $v +'</td>\
                    </tr>')
            }
        });

        return false;
    });
</script>
</body>
</html>